<template>
  <div class="header_wrap">
    <div class="admin_text">用户名</div>
    <ul class="header_menu_container" style="float:right;">
      <li class="header_menu_li">
        <a href="javascript:;" class="el-dropdown-link" @click="quitOrganization">
          客户消息
        </a>
      </li>
      <li class="header_menu_li">
        <a href="javascript:;" class="el-dropdown-link" @click="quitOrganization">
          系统消息
        </a>
      </li>
      <li class="header_menu_li">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{userName}}<i class="iconfont icon-option"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><i class="iconfont icon-qiehuan"></i> 商家切换</el-dropdown-item>
            <el-dropdown-item><i class="iconfont icon-icongerenzhongxin;plon]jh"></i> 账号信息</el-dropdown-item>
            <el-dropdown-item><i class="iconfont icon-bangzhu"></i> 帮助中心</el-dropdown-item>
            <el-dropdown-item><i class="iconfont icon-tuichu"></i> 退出账号</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  props: {
    inOrganization: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      UpdatePasswordDialog: {
        visible: false
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'userName',
      'IsSuperUser'
    ])
  },
  methods: {
    ...mapActions([
      'QuitOrganizationAction',
      'AdminLogoutAction'
    ]),
    redirectUrl (url) {
      this.$router.push(url)
    },
    logout () {
      this.AdminLogoutAction().then(() => {
        this.$message.success('已成功退出登录！')
        this.$router.replace('/login')
      })
    },
    quitOrganization () {
      this.QuitOrganizationAction().then(() => {
        this.$router.replace('/')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.header_wrap {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  .admin_text {
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }
}
.header_menu_container
{
  display: block;
  height: 100%;
  .header_menu_li
  {
    display: block;
    height: 100%;
    float: left;
    padding: 0;
    box-sizing: border-box;
    .el-dropdown
    {
      display: block;
      height: 100%;
      box-sizing: border-box;
    }
    .el-dropdown-link
    {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: #6D6D6D;
      padding: 0 10px;
      font-size: 10px;
      .iconfont {
        font-size: 10px;
      }
      &:hover
      {
        color: #D0021B;
      }
    }
  }
}
</style>
